<template>
  <div class="category">
     <span v-for="(item, index) in category" :key="index"
     :class="{active: active === index, 'day-shift': index ===1}"
     @click="categorySwitch(index)">
         {{item}}
      </span>
    <!-- <span class="all-day active">{{category[0] || ''}}</span>
    <span class="day-shift">{{category[1] || ''}}</span>
    <span class="night-shift">{{category[2] || ''}}</span> -->
  </div>
</template>

<script>
export default {
  name: 'Category',
  data () {
    return {
      active: 0,
      category: []
    }
  },
  created () {
    this.category = this.$parent.category ? this.$parent.category : ''
  },
  mounted () {
  },
  methods: {
    categorySwitch (ind) {
      this.active = ind
      this.$emit('scuuesionIndex', ind)
    }
  }
}
</script>

<style lang="stylus" scoped>
.category
  height 1.2rem
  line-height 1.2rem
  span
    display inline-block
    height 0.7rem
    line-height 0.7rem
    width 2.5rem
    border 1px solid #d9d9d9
    border-radius 5px
    background-color #d9d9d9
    text-align center
    font-size 0.3rem
  .active
    background-color #1090eb
    color #fff
  .day-shift
    margin 0 0.32rem
</style>
